<template>
  <portal-tools-query ref="query" :trigger="'hover'" placement="left" @callBack="userCallBack">
    <div slot="reference" :class="userShow === true ?'active': ''" @mouseenter="openUser" @mouseleave="closeUser">
      <i class="el-icon-search" />
    </div>
  </portal-tools-query>
</template>

<script>
import PortalToolsQuery from './common/query';
export default {
  name: 'PortalNewQuery',
  components: { PortalToolsQuery },
  data() {
    return {
      userShow: false
    };
  },
  methods: {
    openUser() {
      this.userShow = true;
      this.$refs.query.triggerOnClick();
    },
    closeUser() {
      this.userShow = false;
      this.$refs.query.triggerOnClick();
    },
    userCallBack(data) {
      this.userShow = data;
    }
  }
};
</script>

<style scoped>

</style>
